<template>

    <div class="list">
        <template v-for="item in data">
            <router-link :to="'/detail?id='+ item.id">
                <img class="sign" src="../assets/sold.png" v-if="item.status == 'Offline'"/>
                <img class="sign" src="../assets/promotion.png" v-if="item.status == 'Promotion'"/>

                <img-hover class="img" :img1="item.showImages[0] && item.showImages[0].fullUrl"
                           :img2="item.showImages[1] && item.showImages[1].fullUrl">ffff</img-hover>

                <div style="margin-top:10px;">{{item.name}}</div>
                <div style="margin-top:6px;" class="value2" v-if="item.value">
                    <label v-for="(it) in item.value">{{it}}</label>
                </div>
                <div style="margin-top:6px;" v-if="item.salePrice"> ￥{{item.salePrice_yuan }}</div>
            </router-link>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    import imgHover from "../../components/ImgHover.vue"

    export default {
        components: {imgHover},
        props: {
            value: {
                type: Array, default: []
            }
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-start;
        position: relative;
    }

    .list > *, .list div {
        text-align: center;
    }

    .list > * {
        margin-bottom: 3rem;
        position: relative;
    }

    .list .img {
        display: block;
        width: 27vw;
        height: 27vw;
        transition-property: opacity;
        transition-duration: 200ms;
    }

    .list .sign {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 99;
    }

    .list .value2, .list .value2 * {
        padding-right: 1.4rem;
    }

    @media screen and (max-width: 60rem) {
        .list .img {
            width: 90vw;
            height: 90vw;
        }
    }


</style>
